<template>
    <nut-empty
        v-if="productListRef.length <= 0"
        image="empty"
        description="购物车是空的呢"
    ></nut-empty>
    <div class="product-list pb-20">
        <nut-swipe v-for="(product, index) in productListRef" :key="product.id">
            <div class="product-box">
                <div class="select-box" @click="toggleSelect(product)">
                    <IconFont v-if="product.selected" name="checked"></IconFont>
                    <IconFont v-else name="check-normal"></IconFont>
                </div>
                <img class="img" :src="product.img" alt="" />
                <div class="detail">
                    <p class="title">{{ product.name }}</p>

                    <div class="bottom">
                        <p class="price text-red-600">¥{{ product.price }}</p>
                        <nut-input-number v-model="product.count" />
                    </div>
                </div>
            </div>
            <template #right>
                <nut-button
                    shape="square"
                    style="height: 100%"
                    type="danger"
                    @click="deleteProduct(index)"
                    >删除</nut-button
                >
            </template>
        </nut-swipe>
    </div>

    <div
        class="fixed bottom-0 w-screen p-4 pb-8 box-border bg-white flex justify-between font-semibold"
    >
        <div class="flex items-center">
            <p>总价：</p>
            <span class="text-red-600">¥{{ totalPrice }}</span>
        </div>
        <nut-button
            type="primary"
            :disabled="!selectedProductList.length"
            @click="linkToOrderConfirm()"
            >去下单({{ selectedProductList.length }})</nut-button
        >
    </div>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { productList } from '@/config/index'
import productCard from './productCard.vue'
const productListRef = ref(
    productList.map((product) => {
        return {
            ...product,
            selected: false,
            count: 1
        }
    })
)

const toggleSelect = (product) => {
    product.selected = !product.selected
}

const deleteProduct = (index) => {
    productListRef.value.splice(index, 1)
}

const selectedProductList = computed(() => {
    return productListRef.value.filter((product) => product.selected)
})
const selectedProductIds = computed(() => {
    return selectedProductList.value.map((product) => product.id)
})
const totalPrice = computed(() => {
    let total_price = 0
    selectedProductList.value.forEach((product) => {
        total_price += product.price * product.count
    })
    return total_price
})

const linkToOrderConfirm = () => {
    console.log('selectedProductList', selectedProductIds.value.join())
    Taro.navigateTo({
        url: `/pages/order/confirm/index?from=cart&product_ids=${selectedProductIds.value.join()}`
    })
}
</script>

<style lang="less">
@primary-color: #d81e06;

.product-list {
    width: 750px;
    overflow: hidden;
}

.product-box {
    margin: 32px auto;
    display: flex;
    width: 686px;
    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;

    .select-box {
        align-self: center;
    }

    .img {
        margin-left: 16px;
        width: 240px;
        height: 240px;
        border-radius: 16px;
    }

    .detail {
        margin-left: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            font-size: 40px;
            color: @primary-color;
        }

        .bottom {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}

.page-bottom {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: 750px;
    padding: 32px 32px 44px 32px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .flex-box {
        display: flex;
        align-items: center;
    }
}
</style>
